<template>
    <div class="home-bottom">
        <div class="item">
            <div class="title">
                <i class="iconfont icon-baoxiugongdan icon"></i>
                <span>报修工单</span>
            </div>
            <div class="main repair">
                <div class="number">
                    <span v-for="item in repairCount" :key="item.key">{{ item.value }}</span>
                </div>
                <div class="point-line">
                    <div class="point-line-item"><span class="point" /></div>
                    <div class="point-line-item"><span class="point" /></div>
                    <div class="point-line-item"><span class="point" /></div>
                    <div class="point-line-item"><span class="point" /></div>
                </div>
                <div class="state">
                    <div v-for="item in repairCount" :key="item.key">
                        <span>{{ item.key }}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="title">
                <i class="iconfont icon-weibaogongdan icon"></i>
                <span>维保工单</span>
            </div>
            <div class="main maintenance">
                <div class="online" style="margin-top: 15px" />
                <div class="online" style="width: 200px; height: 100px; margin-left: 30px" />
            </div>
        </div>
        <div class="item">
            <div class="title">
                <i class="iconfont icon-dangrijihua icon"></i>
                <span>当日计划</span>
            </div>
            <div class="main now-date">
                <div class="out">
                    <div class="wrapper">
                        <div class="matter" :class="[{ useless: item.state == 3, normal: item.state == 1, postpone: item.state == 2 }]" v-for="(item, index) in plan" :key="index">
                            <span>{{ item.name }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="title">
                <i class="iconfont icon-xiaoxizhongxin icon"></i>
                <span>消息中心</span>
            </div>
            <div class="main">
                <div class="main early-warning">
                    <div class="out">
                        <div class="wrapper">
                            <div class="row" v-for="item in message">
                                <div class="left">
                                    <div :style="{ color: stateName[item.type - 1]?.fontColor, background: stateName[item.type - 1]?.bgColor }">
                                        {{ item.type === 1 ? "PLC告警" : item.type === 2 ? "工单消息" : item.type === 3 ? "状态监测告警" : "" }}
                                    </div>
                                    <div>{{ item.content }}</div>
                                </div>
                                <div class="right">{{ item.createDate ? dayjs(item.createDate).format("YYYY-MM-DD HH:MM:ss") : "" }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { nextTick, watch } from "vue";
import echarts from "@/echarts";
import { maintenanceOption, maintenanceLineOption } from "../config.js";
import dayjs from "dayjs";
const props = defineProps({
    plan: {
        type: Array,
        default: []
    },
    message: {
        type: Array,
        default: []
    },
    maintenanceCount: {
        type: Object,
        default: () => ({})
    },
    repairCount: {
        type: Array,
        default: []
    }
});
watch(
    () => props.maintenanceCount,
    (newVal) => {
        console.log(newVal);
        nextTick(() => {
            const els = document.querySelectorAll(".online");
            els.forEach((item) => {
                echarts.dispose(item);
                echarts.init(item);
            });
            maintenanceOption.series[0].label.formatter = () => [`{a|${newVal.succeedCount}%}`, `{b|维保完成率}`].join("\n");

            newVal.bar.forEach((item, index) => {
                if (item) {
                    maintenanceLineOption.series[0].data[index].value = item;
                    maintenanceLineOption.series[2].data[index].value = item;
                } else {
                    maintenanceLineOption.series[0].data[index].value = item;
                    maintenanceLineOption.series[1].data[index].value = item;
                    maintenanceLineOption.series[2].data[index].value = item;
                }
            });
            echarts.getInstanceByDom(document.querySelectorAll(".online")[0]).setOption(maintenanceOption);
            echarts.getInstanceByDom(document.querySelectorAll(".online")[1]).setOption(maintenanceLineOption);
        });
    }
);

const stateName = [
    { fontColor: "#AB9143", bgColor: "#495548", index: 1 },
    { fontColor: "#64BA68", bgColor: "#305F58", index: 2 },
    { fontColor: "#E77244", bgColor: "#494448", index: 3 }
];
</script>

<style lang="less" scoped>
.home-bottom {
    position: relative;
    z-index: 12;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    .item {
        width: 462px;
        height: 247px;
        z-index: 22;
        .title {
            width: 100%;
            height: 60px;
            line-height: 60px;
            font-size: 24px;
            border-bottom: 1px solid rgba(0, 101, 178, 0.5);
            .icon {
                font-size: 24px;
                margin: 0 11px;
            }
        }
        .main {
            box-sizing: border-box;
            height: 187px;
            // background: linear-gradient(180deg, rgba(62, 167, 222, 0) 0%, rgba(30, 64, 82, 0.3) 100%);
            background: linear-gradient(180deg, #1c394a 0%, #1e4054 100%);
            text-align: center;
        }
        .maintenance {
            display: flex;
            justify-content: center;
            align-items: center;
            .online {
                box-sizing: border-box;
                width: 120px;
                height: 120px;
            }
        }
        .now-date {
            box-sizing: border-box;
            padding-left: 15px;
            overflow: hidden;
            .out {
                margin-top: 15px;
                height: 162px;
                overflow: auto;
                &::-webkit-scrollbar {
                    width: 0;
                }
                .wrapper {
                    display: flex;
                    flex-wrap: wrap;
                    .matter {
                        display: flex;
                        align-items: center;
                        box-sizing: border-box;
                        width: 50%;
                        height: 30px;
                        color: #fff;
                        font-size: 14px;
                        span {
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            overflow: hidden;
                        }
                        &::before {
                            content: "";
                            display: block;
                            width: 8px;
                            height: 8px;
                            border-radius: 50%;
                            margin-right: 8px;
                        }
                    }
                    .normal::before {
                        background-color: #a0d911;
                    }
                    .postpone::before {
                        background-color: #ffc53f;
                    }
                    .useless {
                        text-decoration: line-through;
                    }
                    .useless::before {
                        background-color: #ff7a45;
                    }
                }
            }
        }

        .early-warning {
            font-size: 12px;
            text-align: center;
            overflow: hidden;
            margin: 0 25px;
            height: 172px;
            .out {
                margin-top: 15px;
                height: 162px;
                overflow: auto;
                &::-webkit-scrollbar {
                    width: 0;
                }
                .row {
                    display: flex;
                    align-items: center;
                    margin-top: 11px;
                    .left {
                        display: flex;
                        div {
                            &:first-child {
                                width: 80px;
                                height: 20px;
                                line-height: 20px;
                                border-radius: 2px;
                                font-size: 9px;
                                margin-right: 10px;
                            }
                            &:nth-child(2) {
                                width: 150px;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                overflow: hidden;
                                font-size: 14px;
                                text-align: left;
                            }
                        }
                    }
                    .right {
                        margin-left: 13px;
                        color: #4ba6dd;
                        font-size: 14px;
                    }
                    &:first-child {
                        margin-top: 0;
                    }
                }
            }
        }
        .repair {
            overflow: hidden;
            .number {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: 37px;
                span {
                    width: calc(100% / 3);
                    font-size: 36px;
                    font-weight: 600;
                }
            }
            .point-line {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: 16px;
                .point-line-item {
                    position: relative;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: calc(100% / 3);
                    &:nth-of-type(1):after,
                    &:nth-of-type(2):after,
                    &:nth-of-type(3):after {
                        content: "";
                        display: block;
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%);
                        left: 75px;
                        width: 75px;
                        height: 1px;
                        border-bottom: 1px dashed #25a9f6;
                    }
                    .point {
                        width: 10px;
                        height: 10px;
                        background: #4ba6dd;
                        border-radius: 50%;
                    }
                }
            }
            .state {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: 10px;
                div {
                    width: calc(100% / 3);
                    span {
                        display: inline-block;
                        width: 80px;
                        height: 32px;
                        line-height: 32px;
                        background: rgba(37, 169, 246, 0.3);
                        border: 1px solid #25a9f6;
                    }
                }
            }
        }
    }
}
</style>
